<template>
  <div class="subjectScoreTable"> 
    <head-Menu></head-Menu>
    <div class="SSTContainer">
      <el-table :data="TSTList" height="610" :default-sort = "{prop: 'totalScore', order: 'descending'}" style="width:calc(100% - 10px);">
        <el-table-column width='80px' label="排 名" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.$index + 1}}</template>
        </el-table-column>
        <el-table-column label="学 号" prop="account" show-overflow-tooltip></el-table-column>
        <el-table-column label="姓 名" prop="username" show-overflow-tooltip></el-table-column>
        <el-table-column label="班 级" prop="classes" show-overflow-tooltip
          :filters="getfilters()"
          :filter-method="filterHandler">
        </el-table-column>
        <el-table-column v-for="(data, i) in TSTList[0].scoreList" :label="data.subject" show-overflow-tooltip>
          <template slot-scope="scope">{{TSTList[scope.$index].scoreList[i].score}}</template>
        </el-table-column>
        <el-table-column label="总 成 绩" prop="totalScore" sortable show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import headMenu from '../../components/headMenu.vue'
import { getTotalScoreTable } from "../../api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      toTotalScoreTable: [],
      TSTList: [],
      classesList: [],
    }
  },
  components: {
    headMenu
  },
  created() {
    this.toTotalScoreTable = JSON.parse(sessionStorage.getItem('toTotalScoreTable'))
    this.getTotalScoreTable()
  },
  methods: {
    async getTotalScoreTable() {
      await getTotalScoreTable(this.toTotalScoreTable)
        .then((res) => {
          this.TSTList = res.TSTList
          this.classesList = res.classesList
        })
    },
    getfilters() {
      let filters = []
      for (let i = 0; i < this.classesList.length - 1; i++) {
        filters.push({
          text: this.classesList[i] + '班',
          value: String(this.classesList[i]),
        })
      }
      return filters
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },

  },
}
</script>

<style lang='stylus'>
.subjectScoreTable
  flex 1 1 100%
  display block
  .SSTContainer
    margin 0 10px
    border 1px solid #CCCCCC  
    text-align center
</style>